import React from 'react';
import { Table } from 'antd';
import './PrinterLayout.jsx.css';

const PrinterLayout = ({ title, department, columns, data }) => {
    const today = new Date();
    const year = today.getFullYear();
    const tableId = `HR-${year}-${Math.floor(Math.random() * 1000)}`;

    return (
        <div className="print-container">
            {/* Header */}
            <div className="header-section">
                <div className="company-logo">LOGO</div>
                <div className="header-content">
                    <h1>{title}</h1>
                    <p>制表日期：{today.toLocaleDateString()}</p>
                    <p>部门：{department}</p>
                </div>
                <div className="report-number">编号：{tableId}</div>
            </div>

            {/* Table */}
            <div className="table-section">
                <Table
                    columns={columns}
                    dataSource={data}
                    pagination={false}
                    bordered
                    size="middle"
                    rowKey="key"
                    scroll={{ x: 'max-content' , y: 300 }}
                />
            </div>

            {/* Footer */}
            <div className="footer-section">
                <div className="signature-area">
                    {['制表人', '审核人', '批准人'].map(role => (
                        <div key={role}>
                            <p>{role}：________________</p>
                            <p>日期：________________</p>
                        </div>
                    ))}
                </div>
                <div className="footer-note">
                    <p>注：本表格仅限内部使用，未经授权不得外传</p>
                </div>
            </div>
        </div>
    );
};

export default PrinterLayout;
